<template>
  <div id="Index" v-if="!loading">
    <van-swipe :autoplay="3000" indicator-color="white" show-indicators>
      <van-swipe-item v-for="({url,remarks1},i) in bannerList" :key="i">
        <van-image class="swipe-cover" :src="remarks1" @click="navigateTo(url)" fit="cover"/>
      </van-swipe-item>
    </van-swipe>
    <van-row class="c-entry ">
      <van-col :span="4" v-for="([label,url,icon],i) in entryCfg" @click="$pushRoute(url)" :key="i"
               class="entry-item">
        <van-image class="entry-item__icon" :src="icon"/>
        <em class="entry-item__label">{{ label }}</em>
      </van-col>
    </van-row>
    <van-image @click="$pushRoute('/policy')" class="a-banner l-segment" :src="bannerPic"/>
    <div class="c-news l-segment">
      <section class="c-news__item" @click="navigateTo(url)" v-for="({img,sub,name,url}) in customizeList">
        <div class="c-news__wrap">
          <h3 class="c-news__title">{{ name }}</h3>
          <p class="c-news__content">{{ sub }}</p>
        </div>
        <van-image class="c-news__img" fit="cover" :src="img"/>
      </section>
    </div>
    <div v-for="([label,url],i) in sections" class="c-article l-segment" :key="i">
      <header class="article-header">
        <strong>{{ label }}</strong>
        <aside @click="$pushRoute(url)" class="article-header__right">
          <em>更多</em>
          <van-icon name="arrow"/>
        </aside>
      </header>
      <section @click="intoDetail(i,item)"
               v-for="item in [policyList,exerciseList][i]"
               class="article-section">
        <van-image fit="cover" class="article-section__img" :src="item.actbill||item.picture"/>
        <div class="article-section__wrap">
          <p class="article-section__content" :class="{single:i===1}">{{ item.title }}</p>
          <em>{{ item.actstarttime ||item.createTime}}</em>
          <p class="single" v-if="i===1">主办方：{{ item.sponsor }}</p>
        </div>
      </section>
    </div>
  </div>
</template>
<script lang="ts">
import Vue, {ComponentOptions, VueConstructor} from "vue"
import Component, {mixins} from 'vue-class-component'
import {CustomMixin} from "@/plugins/mixins/custom";
import {requestByGet, requestByPost} from "@/utils/request";
import {thenSet} from "@/utils/logic";

const bannerPic = `http://www.qqchuang.com.cn/qqc/static/img/register_banner.55248c25.jpg`
const entryIcons = ["http://www.qqchuang.com.cn/qqc/static/img/icon1.df888437.png", "http://www.qqchuang.com.cn/qqc/static/img/icon2.81dd56ad.png", "http://www.qqchuang.com.cn/qqc/static/img/icon3.6768ca8c.png", "http://www.qqchuang.com.cn/qqc/static/img/icon4.2f9ac737.png", "http://www.qqchuang.com.cn/qqc/static/img/icon5.109f190c.png", "http://www.qqchuang.com.cn/qqc/static/img/icon6.c8fd8b28.png"];
const entryCfg = Object.freeze([["导师帮扶", "/support"], ["政策资讯", "/list/policy"], ["资本相亲", "/list/capital"], ["品牌服务", "/activity"], ["人才服务", "/list/job"], ["空间入驻", "/list/merchant"]].map((arr, idx) => [...arr, entryIcons[idx]]))
@Component
export default class Index extends mixins(CustomMixin) implements ComponentOptions<Vue> {
  entryCfg = entryCfg;
  bannerPic = bannerPic;
  loading = true;
  bannerList = [];
  exerciseList = [];
  customizeList = [];
  policyList = [];
  sections = [['政策资讯', '/list/policy'], ['活动大赛', '/activity']];

  async initBanner() {
    this.bannerList = await requestByGet(`/qqc/qqcBannerimg/syList`);
    this.loading = false;
  }

  async initNews() {
    requestByGet(`/qqc/qqcExercise/typeList`).then(thenSet(this, "exerciseList"));
    requestByGet(`/qqc/qqcPolicy/syList`).then(thenSet(this, "policyList"));
    requestByGet(`/qqc/qqcCustomize/list`).then(thenSet(this, "customizeList", false));
  }

  intoDetail(type, {id, actType, formality, policyUrl, acturl}) {
    if (type === 0 && formality === 1) return this.navigateTo(policyUrl);
    if (type === 1 && actType === 2) return this.navigateTo(acturl);
    this.$pushRoute({path: type ? '/activity-info' : '/policy', query: {customId: id}})
  }

  created() {
    this.initBanner();
    this.initNews();
  }
}
</script>

<style scoped lang="scss">
@import "~assets/common.scss";

#Index {
  .swipe-cover{
    width: 100%;
    height: 200px;
  }
  .c-entry {
    background: #fff;

    .entry-item {
      @include flex-center;
      flex-direction: column;
      color: $p-color;
      margin: 16px 0 6px;

      &__icon {
        width: 32px;
        height: 29px;
      }

      &__label {
        margin-top: 6px;
      }
    }
  }

  .a-banner {
    width: 375px;
    height: 104px;
  }

  .l-segment {
    background: #fff;

    &:not(:last-child) {
      margin-bottom: 12px;
    }
  }

  .c-news {
    &__wrap {
      overflow: hidden;
      margin-right: 10px;
      min-width: 250px;
    }

    &__item {
      padding: 20px;
      line-height: 1.3;
      @include alignCenter;

      &:not(:last-child) {
        border-bottom: 1PX solid $border-clr;
      }
    }

    &__title {
      @include t-overflow;
      margin-bottom: 4px;
    }

    &__content {
      font-size: 10px;
      color: $p-color;
      font-weight: bold;
      @include t-overflow(2);
    }

    &__img {
      flex-shrink: 0;
      max-width: 70px;
      max-height: 70px;
    }
  }

  .c-article {
    padding: 0 16px;

    .article-header {
      @include flex-between;
      align-items: center;
      padding: 10px 0;
      border-bottom: 1PX solid $border-clr;

      &__right {
        @include alignCenter;
        color: $p-color;
      }
    }

    .article-section {
      @include alignCenter;
      padding: 12px 0;

      &__img {
        width: 100px;
        height: 67px;
        flex-shrink: 0;
        margin-right: 10px;
      }

      &__wrap {
        overflow: hidden;
        line-height: 1.5;
        color: $p-color;
      }

      &__content {
        color: #000;
        @include t-overflow(2);
        margin-bottom: 2px;
        font-size: 14px;
      }

      .single {
        display: block;
        @include t-overflow(1);
      }
    }
  }
}
</style>
